<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>商品搜索</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="css/flower.css">
    <link rel="stylesheet" type="text/css" href="css/flowerYang.css">
    <link rel="stylesheet" type="text/css" href="css/flowerShen.css">
    <link rel="stylesheet" type="text/css" href="css/font_7el6daiby6/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/yongshenghua.css"/>
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">
        nav:last-child{
            position: relative;
            left: 56%;
        }
        .active a{
            color: #ff6a00 !important;
        }
        .active.no a{
            color: #233333 !important;
        }
        .comclass.avtive a{
            color: #ff6a00 !important;
        }
    </style>

</head>

<body class="home">
<%@ include file="GeTop.jsp"%>
<!-- 导航 End -->


<div id="top-banner">
    <div id="com-width">
        <img src="image/goodsselect/ysh-top-banner.jpg">
    </div>
</div>
<div id="main-box">
    <div id="com-width">
        <div id="filterbar" class="clearfix">
            <ul id="com-1">
                <li class="active"><a href="#" dataNo="0">综合</a></li>
                <li class="active no"><a href="#" dataNo="1">销量</a></li>
                <li class="active no"><a href="#" class="jiage" dataNo="2">价格</a></li>
                <li class="active no"><a href="#" dataNo="4">最新</a></li>
            </ul>
        </div>
        <div class="product-filter">
            <div class="product-zi">
                <span>分类：</span>
                <ul class="product-u">
                    <li class="comclass"><a href="#" dataid="0">全部</a></li>
                    <c:forEach items="${comclassList}" var="cclass">
                        <li class="comclass"><a href="#" dataid="${cclass.id}">${cclass.name}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="product-zi">
                <span>人群：</span>
                <ul class="product-u">
                    <li><a href="#">送恋人爱人</a></li>
                    <li><a href="#">送父母长辈</a></li>
                    <li><a href="#">送朋友同事</a></li>
                </ul>
            </div>

        </div>

    </div>
</div>
<div id="shenti" class="clearfix">
    <div id="shenti-zhong" class="clearfix">
        <ul>
            <c:forEach items="${requestScope.goods.list}" var="g">
                <li>
                    <a href="commodityDetails.shtml?id=${g.id}">
                        <div id="lotm-img">
                            <img src="image/commodity/${g.comimage}">
                        </div>
                        <div id="lotm-text">
                            <p class="text-p">${g.content}</p>
                            <h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">${g.comname}</h5>
                            <p class="desc">${g.content2}</p>
                            <div id="text-box">
                                <span class="prlce">¥&nbsp;${g.outprice}</span>
                            </div>
                        </div>
                    </a>
                </li>
            </c:forEach>
        </ul>
    </div>
    <%--        分页数据--%>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <c:set var="p" value="${requestScope.goods}"></c:set>
            <li>
                <a href="javascript:;" aria-label="Previous" onclick="changePage(${p.prePage<1?1:p.prePage});">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="goodsSelectServlet.shtml?pageNo=1">首页</a></li>
            <c:forEach items="${requestScope.goods.navigatepageNums}" var="i">
                <c:if test="${i==requestScope.goods.pageNum}" var="f">
                    <li class="active"><span>${i}</span></li>
                </c:if>
                <c:if test="${!f}">
                    <li><a href="javascript:;" onclick="changePage(${i});">${i}</a></li>
                </c:if>
            </c:forEach>
            <li><a href="javascript:;" onclick="changePage(${p.pages});">末页</a></li>
            <li>
                <a href="javascript:;" aria-label="Next" onclick="changePage(${p.nextPage==0?p.pages:p.nextPage});">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            共${p.total}条数据，共${p.pages}页
        </ul>
    </nav>
</div>
<div id="weibu">
    <div id="weibu-1">
        <h3>永生花相关文章推荐</h3>
    </div>
    <div id="weibu-2" class="clearfix">
        <ul>
            <li><a href="#">什么是永生花?</a></li>
            <li><a href="#">永生花哪里有卖?</a></li>
            <li><a href="#">永生花是真话吗?</a></li>
            <li><a href="#">永生花多少钱?</a></li>
            <li><a href="#">永生花怎么保养?</a></li>
        </ul>
        <ul>
            <li><a href="#">永生花寓意是什么？永生花的意义是什么？?</a></li>
            <li><a href="#">永生花是什么花？如何制作永生花？永生花制作方法介绍</a></li>
            <li><a href="#">永生花价格是多少？永生花贵吗？</a></li>
            <li><a href="#">永生花花语，永生玫瑰花代表什么？</a></li>
            <li><a href="#">永生花盒是什么？永生花盒哪家最好？</a></li>
        </ul>
        <ul>
            <li><a href="#">情人节送永生花代表什么？</a> </li>
            <li><a href="#">进口永生玫瑰与国产永生玫瑰的区别</a></li>
            <li><a href="#">送女朋友保鲜花，代表不凋谢的爱情</a></li>
            <li><a href="#">送女孩子什么礼物好？泰国保鲜花推荐</a></li>
            <li><a href="#">结婚纪念送花：永生花·花永生·爱永恒</a></li>
        </ul>
    </div>
</div>
<%-- 创建隐藏域 用于做页面的整体刷新（商品搜索+条件+排序）--%>
<form method="post" action="goodsSelectServlet.shtml" id="search">
    <input type="hidden" name="goodsName" value="${requestScope.goodsName}"><%--商品名称--%>
    <input type="hidden" name="pageNo" value="1"><%--展示页数--%>
    <input type="hidden" name="sortNo" value="${requestScope.sortNo}"><%--排序条件--%>
    <input type="hidden" name="classid" value="${classid}"><%--分类条件--%>
</form>
<script type="text/javascript">
        //绑定上一次搜索的值
        $("[name='keyword']").val("${requestScope.goodsName}");
        //绑定排序
        $("#com-1 li").removeClass("no");
        switch(${requestScope.sortNo}){
            case 0:
                $("#com-1 li:eq(1)").addClass("no");
                $("#com-1 li:eq(2)").addClass("no");
                $("#com-1 li:eq(3)").addClass("no");
                break;
            case 1:
                $("#com-1 li:eq(0)").addClass("no");
                $("#com-1 li:eq(2)").addClass("no");
                $("#com-1 li:eq(3)").addClass("no");
                break;
            case 2:
                $("#com-1 li:eq(0)").addClass("no");
                $("#com-1 li:eq(1)").addClass("no");
                $("#com-1 li:eq(3)").addClass("no");
                $("#com-1 li:eq(2)").children("a").attr("dataNo","3");
                break;
            case 3:
                $("#com-1 li:eq(0)").addClass("no");
                $("#com-1 li:eq(1)").addClass("no");
                $("#com-1 li:eq(3)").addClass("no");
                $("#com-1 li:eq(2)").children("a").attr("dataNo","2");
                break;
            case 4:
                $("#com-1 li:eq(0)").addClass("no");
                $("#com-1 li:eq(1)").addClass("no");
                $("#com-1 li:eq(2)").addClass("no");
                break;
        }
        //商品类别高亮显示
        $(".comclass a[dataid='${classid}']").parent().addClass("active");
        //点击搜索按钮
        $(".btn.btn-primary").click(function(){
            //获取文本框搜索的值
            var textVal = $("[name='keyword']").val();
            $("#search [name='goodsName']").val(textVal);
            $("#search").submit();
            //不让上方的搜索框提交 让写好的隐藏域去提交
            return false;
        });
        //点击排序标题
        $("#com-1 li a").click(function(){
            $(this).parent().removeClass("no");
            $(this).parent().siblings().addClass("no");
            //获取点击的 排序编号
            var sortNo = $(this).attr("dataNo");
            if(sortNo=="2"){
                $(this).attr("dataNo","3");
            }else if(sortNo=="3"){
                $(this).attr("dataNo","2");
            }
            $("#search [name='sortNo']").val(sortNo);
            $("#search").submit();
            return false;
        });
        //点击商品类别
        $(".comclass a").click(function(){
            $(this).parent().addClass("active");
            $(this).parent().siblings().removeClass("active");
            //获取点击的类别编号
            var clid = $(this).attr("dataid");
            $("#search [name='classid']").val(clid);
            $("#search").submit();
            return false;
        });
        function changePage(pageNo){
            $("#search [name='pageNo']").val(pageNo);
            $("#search").submit();
        }
</script>
<!-- 尾部导航 -->
<%@ include file="bottom.jsp"%>

<script type="text/javascript" src="//img02.hua.com/pc/js/common.js"></script>
<script type="text/javascript" src="js/flower.js"></script>

</body>
</html>
